<script lang="ts">
    import QcEdit from "./QcEdit.svelte";
    import QcPreview from "./QcPreview.svelte";
    import { HSplitPane, VSplitPane } from "$lib/splitpane";
    let classPointerEventsNone;
    const onMouseDown = () => {
        classPointerEventsNone = "pointer-events-none";
    };
    const onMouseUp = () => {
        classPointerEventsNone = "";
    };


  import type { KV } from "$lib/ebm";
  export let attributes: KV[] = [
    {
      k: "subject",
      v: "en",
    },
  ];

  let fileid = attributes.find((x) => x.k == "file_id");

</script>

<HSplitPane
    leftPaneSize="80%"
    rightPaneSize="20%"
    minLeftPaneSize="5px"
    minRightPaneSize="5px"
>
    <left slot="left">
        <HSplitPane
            leftPaneSize="60%"
            rightPaneSize="40%"
            minLeftPaneSize="5px"
            minRightPaneSize="5px"
        >
            <left slot="left">
                <QcEdit>
                    Monaco Editor will be placed here: Top Left Pane
                </QcEdit>
            </left>
            <right slot="right">
                <QcPreview>
                    Markdown Preview will be palced here: Top Right Pane
                </QcPreview>
            </right>
        </HSplitPane>
    </left>
    <right slot="right">
        Quiz Card List will be placed here: Down Right Pane
    </right>
</HSplitPane>
